import { Button, Card, Input, Form, InputNumber, Radio} from 'antd';
import { connect,history} from 'umi';
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';

const FormItem = Form.Item;
const { TextArea } = Input;

const BasicForm = props => {
  const { submitting } = props;
  const [form] = Form.useForm();
  
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = async() => {
    const values = await form.validateFields();
    const { dispatch } = props;
    values.venueId=props.match.params.id
    dispatch({
      type: 'cubeRole/add',
      payload: values,
    });
  };

  return (
    <PageHeaderWrapper>
      <Card bordered={false}>
        <Form
          style={{
            marginTop: 8,
          }}
          form={form}
          name="basic"
        >
          <FormItem
            {...formItemLayout}
            label="角色名称"
            name="roleName"
            rules={[
              {
                required: true,
                message: '请输入角色名称',
              },
            ]}
          >
            <Input placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="角色权限"
            name="roleSign"
            // rules={[
            //   {
            //     required: true,
            //     message: '请选择角色权限',
            //   },
            // ]}
          >
            <Radio.Group>
                <Radio value="1">
                团课
                </Radio>
                <Radio value="2">
                私教
                </Radio>
                <Radio value="2">
                团课+私教
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="备注"
            name="remark"
          >
            <TextArea rows={4} placeholder="请输入" />
          </FormItem>
          <FormItem
            {...submitFormLayout}
            style={{
              marginTop: 32,
            }}
          >
            <Button type="primary" onClick={onFinish} loading={submitting}>
             提交
            </Button>
            <Button
              style={{
                marginLeft: 8,
              }}
              onClick={()=>history.push(`/auth/role`)}
            >
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading }) => ({
  submitting: loading.effects['cubeRole/add'],
}))(BasicForm);
